<template>
  <div class="home">
    <button @click="num++">num++</button>
    <h1>{{num}}</h1>
    <button @click="person.name='李四'">更改姓名</button>
    <h2>{{person.name}}</h2>
    <button @click="person.age++">更改年龄</button>
    <h3>{{person.age}}</h3>

    <button @click="person.job.hh.money++">加薪</button>
    <h4>{{person.job.hh.money}}</h4>
    <!-- <button @click="rea.obj.salary++">{{rea.obj.salary}}</button> -->

  </div>
</template>

<script>
// @ is an alias to /src
import {watch,ref,reactive,toRefs,watchEffect} from 'vue'
export default {
 setup(props) {
    
    const num= ref(1)
    const person = reactive({
         name:'张三',
         age:18,
         job:{
             hh:{
                 money:12
             }
         }
    })
    // let rea=reactive({
    //     name:'我是谁',
    //     age:21,
    //     obj : {
    //       salary : 20000
    //     }
    //   })
    //    watch(()=>rea.obj,(newValue,oldValue)=>{
    //     console.log('rea变化了',newValue,oldValue)
    //   },{deep:true})

    // watch(你要监听的数据,function(新值，老值){},immediate:true)
    // 加上{immediate:true} 会立即监听，就是已进入页面就开始监听

    // deep:true 深度监听，能监听到对象内部的变化，在vue2中如果想要监听对象内部必须使用深度监听
    // deep：true 在vue3中监听对象内部不在使用deep：true也可以监听到

    // watch(num,function(newVal,oldVal){
    //     console.log(newVal)//新值
    //     console.log(oldVal)//老值
    // },{immediate:true})
    
//    监听整个对象，只要对象里面的任意一个发送变化，就能触发监听
    // watch(person,(newVal,oldVal)=>{
    //     console.log(newVal,oldVal);
        
    // })
    // 监听对象里面的某个属性
    // watch(()=>person.name,(newVal,oldVal)=>{
    //     console.log(newVal);
    // })
    // watch(()=>person.age,(newVal,oldVal)=>{
    //     console.log(newVal);
    // })
      watch(()=>person.job.hh,(newVal,oldVal)=>{
        console.log(newVal);
    })

    // watchEffect(),监听的方法
    // 区别 watchEffect()不需要手动传入依懒项，每次初始化的时候会执行一次回调函数，会自动获取依懒项的变化，（会自动获取组件内属性的变化，）
    // 缺点 无法获取到原始值，只能获取到变化后的值
    watchEffect(()=>{
        console.log(num.value);////
        console.log(person.name);
      
        console.log(person.age);
        // console.log(person.job.hh.money);
    })
    
    


    return {num,person}
 },
  components: {

  }
}
</script>
